#main {
    background: url(../images/bg.jpg) no-repeat rgb(59, 46, 236) !important;
    background-size: 100% 100% !important;

    .mapOutline,
    .mapImg {
        width: 400px;
        height: 400px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    .mapOutline{
        width: 500px;
        height: 500px;
    }

    .mapOutline {
        animation: loading 3s linear infinite;
    }

    .bgLine {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    @keyframes loading {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }

    }

    .logo {
        z-index: 999;
        position: absolute;
        top: 18px;
        left: 10px;
        width: 2.4rem;
        animation: logoRotate 3s infinite ease;
        -webkit-animation: logoRotate 3s infinite ease;
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
    }

    .logo:hover {
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
        /*停止动画*/
    }

    @keyframes logoRotate {
        0% {
            transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            -webkit-transform: rotateY(0deg);
        }

        50% {
            transform: rotateY(-180deg);
            -ms-transform: rotateY(-180deg);
            -webkit-transform: rotateY(-180deg);
        }

        100% {
            transform: rotateY(-360deg);
            -ms-transform: rotateY(-360deg);
            -webkit-transform: rotateY(-360deg);
        }
    }
}

.header {
    position: relative;
    height: 12%;

    .titleText {
        height: 70%;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: flex;
        /* Safari */
        -webkit-box-pack: center;
        /* 12版 */
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        -o-justify-content: center;
        justify-content: center;
        -webkit-box-align: flex-end;
        /* 12版 */
        -webkit-align-items: flex-end;
        -moz-align-items: flex-end;
        -ms-align-items: flex-end;
        -o-align-items: flex-end;
        align-items: flex-end;

        h1 {
            font-size: 0.475rem;
            color: #4ddcfe;
        }
    }

    .subText {
        width: 85%;
        height: 30%;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: flex;
        /* Safari */
        -webkit-box-pack: flex-end;
        /* 12版 */
        -webkit-justify-content: flex-end;
        -moz-justify-content: flex-end;
        -ms-justify-content: flex-end;
        -o-justify-content: flex-end;
        justify-content: flex-end;
        -webkit-box-align: flex-start;
        /* 12版 */
        -webkit-align-items: flex-start;
        -moz-align-items: flex-start;
        -ms-align-items: flex-start;
        -o-align-items: flex-start;
        align-items: flex-start;

        h2 {
            font-size: 0.32rem;
            color: #4ddcfe;
        }
    }

    .showTime {
        position: absolute;
        height: 25%;
        top: 0px;
        bottom: 0px;
        right: 150px;
        margin: auto;
        font-size: 0.25rem;
        color: #208BA8;
        text-align: center;

        p {
            &:last-child {
                font-size: 0.2rem;
            }
        }
    }
}

.mainbox {
    position: relative;
    width: 100%;
    height: 87%;
    justify-content: left !important;

    .subsystem {
        width: 90%;
        height: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-wrap: wrap;

        .buttonFour {
            position: relative;
            background-size: 100% 100%;
            width: 3.6rem;
            height: 3.6rem;
            text-decoration: none;
            -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
            /* For Safari 3.1 to 6.0 */
            transition: width 1s, height 1s, transform 1s;

            img {
                width: .5rem;
                right: 0;
                top: 0;
            }

            a {
                color: white;
            }
        }

        .buttonFour>button {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 74%;
            height: 74%;
            color: white;
            background-color: blue;
            border-radius: 15px;
            box-shadow: 4px 4px 4px #4e4ec4;
            padding: 0 0.5rem;
            font-size: 0.3rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box; //对象作为弹性伸缩盒子模型展示
            -webkit-line-clamp: 2; //限制一个块元素显示的文本的行数
            -webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式

            // background-image: url("../images/main/border1.png");
            background-image: linear-gradient(-45deg, #2097bc, #2a4de8);

        }
    }


}

@media screen and (max-width: 1200px) {
    #main {
        .logo {
            width: 7.4rem;
        }

        .header {
            max-height: 90px;

            .titleText {
                h1 {
                    font-size: 1.4rem;
                }
            }

            .subText {
                min-width: 126px;

                h2 {
                    font-size: 1rem;
                }
            }

            .showTime {
                font-size: 0.6rem;

                p {
                    &:last-child {
                        font-size: 0.56rem;
                    }
                }
            }
        }

        .mainbox {
            .subsystem {
                .buttonFour {
                    width: 10rem;
                    height: 10rem;

                    -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
                    /* For Safari 3.1 to 6.0 */
                    transition: width 1s, height 1s, transform 1s;

                    img {
                        width: 1.2rem;
                    }


                }

                .buttonFour>button {
                    font-size: 0.9rem;
                }


            }

        }
    }
}

@media screen and (max-width: 768px) {
    #main {
        .header {
            max-height: 70px;
        }

        .mainbox {
            .subsystem {
                .buttonFour {
                    width: 14rem;
                    height: 14rem;


                }

                .buttonFour>button {
                    font-size: 1rem;
                }
            }
        }
    }
}

@media screen and (min-width: 1920px) {}

@media screen and (min-width: 3840px) {
    #main {
        .logo {
            width: 4.4rem;
        }

        .header {
            .titleText {
                h1 {
                    font-size: 1rem;
                }
            }

            .subText {
                min-width: 126px;

                h2 {
                    font-size: 0.7rem;
                }
            }

            .showTime {
                font-size: 0.6rem;

                p {
                    &:last-child {
                        font-size: 0.56rem;
                    }
                }
            }
        }

        .mainbox {
            .subsystem {
                .buttonFour {
                    width: 7rem;
                    height: 7rem;
                    -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
                    /* For Safari 3.1 to 6.0 */
                    transition: width 1s, height 1s, transform 1s;
                }
            }
        }
    }
}